<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调整方块样式</title>
    <style>
        main {
            display: flex;
        }
        
        button {
            margin: 0px 5px;
        }
        
        .type {
            position: relative;
        }
        
        .form {
            position: absolute;
            display: flex;
            height: 25px;
        }
        
        .form button {
            width: 60px;
        }
        
        .form span {
            display: flex;
            width: 150px;
            color: rgb(250, 106, 95);
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(224, 132, 247);
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <main>
        <button class="set">改变宽度</button>
        <button class="set">改变高度</button>
        <button class="set">改变背景颜色</button>
        <button class="set">添加border</button>
        <button class="set">调节圆角</button>
        <div class="type">
            <!--  <div class="form">
                <input type="text">
                <button class="affirm">确认</button>
                <span>输入宽度</span>
            </div>
            <div class="form">
                <input type="text">
                <button>确认</button>
                <span>输入高度</span>
            </div>
            <div class="form">
                <input type="color">
                <button class="affirm">确认</button>
                <span>选择颜色</span>
            </div>
            <div class="form">
                <input type="text">
                <input type="color">
                <select name="" id="">
                    <option value="solid">solid</option>
                    <option value="double">double</option>
                    <option value="dashed">dashed</option>
                    <option value="dotted">dotted</option>
                </select>
                <button class="affirm">确认</button>
                <span>设置border的样式</span>
            </div>
            <div class="form">
                <input type="range">
                <button class="affirm">确认</button>
                <span>设置圆角</span>
            </div> -->
        </div>
    </main>
    <div class="box"></div>

    <script>
        //获取相关节点
        let set = document.getElementsByClassName("set"); //大按钮

        let form = document.getElementsByClassName("form")[0]; //选择栏
        let type = document.getElementsByClassName("type")[0];
        let box = document.getElementsByClassName("box")[0];


        let select = document.getElementsByTagName("select")[0];
        set[0].onclick = function() {
                type.innerHTML = `
            <div class="form">
                <input type="text" class="input1">
                <button class="affirm">确认</button>
                <span>输入宽度</span>
            </div>
            `; //会刷新页面
                /* affirm.addEventListener("click", function() {
                    box.style.width = `${input1.value}px`;
                }); */
                let affirm = document.getElementsByClassName("affirm")[0]; //确认按钮
                let input1 = document.getElementsByClassName("input1")[0];
                affirm.onclick = function() {
                    box.style.width = `${input1.value}px`;
                }
            }
            /*  set[0].addEventListener("click", function() {
                 type.innerHTML = `
                 <div class="form">
                     <input type="text" class="input1">
                     <button class="affirm">确认</button>
                     <span>输入宽度</span>
                 </div>
                 `;
                 affirm.onclick = function() {
                     box.style.width = `${input1.value}px`;
                 }
             }, false) */
        set[1].onclick = function() {
            type.innerHTML = `
            <div class="form">
                <input type="text" class="input1">
                <button class="affirm">确认</button>
                <span>输入高度</span>
            </div>
            `;
            let affirm = document.getElementsByClassName("affirm")[0]; //确认按钮
            let input1 = document.getElementsByClassName("input1")[0];
            affirm.addEventListener("click", function() {
                box.style.height = `${input1.value}px`;
            });
            /*  affirm.onclick = function() {
                 box.style.height = `${input1.value}px`;
             } */
        }
        set[2].onclick = function() {
            type.innerHTML = `
            <div class="form" >
                <input type="color" class="input1">
                <button class="affirm">确认</button>
                <span>选择颜色</span>
            </div>
            `;
            let affirm = document.getElementsByClassName("affirm")[0]; //确认按钮
            let input1 = document.getElementsByClassName("input1")[0];
            affirm.addEventListener("click", function() {
                box.style.backgroundColor = `${input1.value}`;
            });
            /* affirm.onclick = function() {
                box.style.backgroundColor = `${input1.value}`;
            } */
        }
        set[3].onclick = function() {
            type.innerHTML = `
            <div class="form">
                <input type="text" class="input1">
                <input type="color" class="input2">
                <select name="" id="">
                    <option value="solid">solid</option>
                    <option value="double">double</option>
                    <option value="dashed">dashed</option>
                    <option value="dotted">dotted</option>
                </select>
                <button class="affirm">确认</button>
                <span>设置border的样式</span>
            </div>
            `;
            let affirm = document.getElementsByClassName("affirm")[0]; //确认按钮
            let input1 = document.getElementsByClassName("input1")[0];
            let input2 = document.getElementsByClassName("input2")[0];
            let select = document.getElementsByTagName("select")[0];
            affirm.addEventListener("click", function() {
                box.style.borderWidth = `${input1.value}px`;
                box.style.borderColor = `${input2.value}`;
                box.style.borderStyle = `${select.value}`;
            });
            /* affirm.onclick = function() {
                box.style.borderWidth = `${input1.value}px`;
                box.style.borderColor = `${input2.value}`;
                box.style.borderStyle = `${select.value}`;
            } */
        }

        set[4].onclick = function() {
            type.innerHTML = `
            <div class="form">
                <input type="range" class="input1">
                <button class="affirm">确认</button>
                <span>设置圆角</span>
            </div
            `;
            let affirm = document.getElementsByClassName("affirm")[0]; //确认按钮
            let input1 = document.getElementsByClassName("input1")[0];
            affirm.addEventListener("click", function() {
                box.style.borderRadius = `${input1.value}px`;
            });
            /* affirm.onclick = function() {
                box.style.borderRadius = `${input1.value}px`;
            } */
        }
    </script>
</body>

</html>